<template>
    <view class="catalogue">
        <view
            class="catalogue-item items-center"
            v-for="cataItem in cataList"
            :key="cataItem.id"
            @click="refresh(cataItem)"
        >
            <!-- <image
                :src="getCourseType(type)"
                :class="{ grayscale: cataItem.studyStatus == 3 }"
            ></image> -->
            <view
                class="bg-info flex items-center justify-center rounded-full p-[10rpx]"
                :class="{ '!bg-primary': cataItem.id == cateId }"
                v-if="type !== 1"
            >
                <u-icon size="22" name="play-right-fill" color="#fff"></u-icon>
            </view>
            <view class="ml-[14rpx] min-w-0">
                <view
                    class="catalogue-title truncate"
                    :class="{
                        'catalogue-title-s': cataItem.id == cateId,
                        grayscale: cataItem.studyStatus == 3
                    }"
                    >{{ cataItem.name }}</view
                >
                <view
                    class="text-info text-sm"
                    :class="{ 'catalogue-title-s': cataItem.id == cateId }"
                    v-if="type !== 1"
                >
                    <text>{{ cataItem.durationStr }}时长</text>
                    <text>·</text>
                    <text v-if="cataItem.id != cateId">学习进度{{ cataItem.studyRate }}</text>
                    <text v-if="cataItem.id == cateId">学习中</text>
                </view>
            </view>
            <view
                class="catalogue-item-last flex justify-end flex-none ml-auto"
                v-if="status == false"
            >
                <text v-if="!cataItem.feeType">免费</text>
                <u-icon v-else name="lock" color="#888888" size="28"></u-icon>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { useUserStore } from '@/stores/user'

const emit = defineEmits(['refresh'])

const props = withDefaults(
    defineProps<{
        list: any // 目录列表
        type: number // 课程类型
        status: boolean // 课程状态 1-加入课程 2-购买课程 3-已购买
        cateId?: any // 目录的ID
    }>(),
    {
        list: [],
        type: 0,
        status: false,
        cateId: -1
    }
)

const cataList: any = ref([])

const userStore = useUserStore()
const isLogin = computed(() => userStore.token)
/**
 * @description 获取课程类型
 */
const getCourseType = computed(() => {
    return (type: any) => {
        switch (type) {
            case 1:
                return '/static/images/icon_image_text.png'
            case 2:
                return '/static/images/icon_audio.png'
            case 3:
                return '/static/images/icon_video.png'
        }
    }
})

watch(
    () => props.list,
    (value) => {
        cataList.value = value
    },
    { immediate: true }
)

/** Methods Start **/
/**
 * @param { number } index
 * @description 打开某个手风琴
 */
const handleCollapseItem = (index: number) => {
    cataList.value[index].open = !cataList.value[index].open
}
/**
 * @param { course_id } 课程ID
 * @description 跳转页面方法
 */
const refresh = (cateItem: any) => {
    if (!isLogin.value) return goPage('/pages/login/index')
    emit('refresh', cateItem)
}
/**
 * @param { string } url
 * @return { void }
 * @description 跳转页面方法
 */
const goPage = (url: string) => {
    uni.navigateTo({ url: url })
}
/** Methods End **/
</script>

<style lang="scss" scoped>
.collapse {
    &--header {
        padding: 30rpx;
        background-color: $color-white;
        border-bottom: 1px solid $color-border-light;
        &--title {
            color: $color-text-deep;
            font-size: $font-size-lg;
            font-weight: 500;
        }
    }

    &--body {
        overflow: hidden;
        transition: all 0.3s;
    }
}

.catalogue {
    // 灰色置灰
    .catalogue-item {
        display: flex;
        padding: 30rpx;
        background-color: $color-white;
        border-bottom: 1px solid $color-border-light;
        image {
            width: 34rpx;
            height: 34rpx;
            flex: none;
        }
        .catalogue-title {
            flex: 1;
            font-size: $font-size-md;
        }
        .catalogue-title-s {
            color: $color-primary;
        }
        .catalogue-item-last {
            width: 100rpx;
            text {
                color: #fa8919;
                padding: 4rpx 15rpx;
                font-size: $font-size-xs;
                background: #fff3e7;
            }
        }
    }

    .grayscale {
        color: #999;
    }
}
</style>
